<template>
    <div class="mixBase" >
        <div class="header">
            <div class="logo-icon float-left">
                <!--<img  src="./../../../static/img/logo.png"/>-->
                社交管理系统
            </div>
            <div class="float-left adimi-name">账号：{{adminName}}</div>
            <div class="float-right">
                <el-dropdown :hide-on-click="false">
                    <span class="el-dropdown-link">
                        <i class="el-icon-setting setIcon"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item  @click.native="jumpLink('accountSetting')">修改密码</el-dropdown-item>
                        <el-dropdown-item @click.native="jumpLogin('Login')">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

        <div class=" mixBase-content" :class="{'content-active':isCollapse}">
            <!--nav-->
            <div class="nav-list float-left" :style="{'width:200px':isCollapse}">
                <div   class="open-nav text-right"  @click="isCollapse=!isCollapse">
                    <span class="el-icon-arrow-left" :class="{'el-icon-arrow-right':!isCollapse}"></span>
                </div>
                <el-menu
                default-active="1-4-1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :collapse="isCollapse"
                >
                    <!--<el-menu-item index="1">
                        <i class="iconfont icon-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item> -->
                    <el-menu-item index="2"  v-show="showMenuList.user_manage==1" @click="jumpLink('userList')">
                        <i class="iconfont icon-addressbook"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="3"  v-show="showMenuList.photo_manage==1" @click="jumpLink('photoList')">
                        <i class="iconfont icon-piclight"></i>
                        <span slot="title">相册管理</span>
                    </el-menu-item>
                    <el-menu-item index="4"  v-show="showMenuList.account_manage==1" @click="jumpLink('adminList')">
                        <i class="iconfont icon-friend"></i>
                        <span slot="title">账号管理</span>
                    </el-menu-item>
                    <el-menu-item index="5"  v-show="showMenuList.chat==1" @click="jumpLink('robotChat')">
                        <i class="iconfont el-icon-service"></i>
                        <span slot="title">陪聊服务</span>
                    </el-menu-item>
                    <el-menu-item index="6"   @click="jumpLink('caCode')">
                        <i class="iconfont el-icon-service"></i>
                        <span slot="title">认证资料</span>
                    </el-menu-item>
                    <el-submenu index="7" >
                        <template slot="title"> <i class="iconfont el-icon-service"></i> <span slot="title">广场管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="7-1" @click="jumpLink('videoAdmin')">视频</el-menu-item>
                            <el-menu-item index="7-2" @click="jumpLink('questionsAdmin')">问答</el-menu-item>
                            <el-menu-item index="7-3" @click="jumpLink('artList')">日志</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="8" >
                        <template slot="title"> <i class="iconfont icon-piclight"></i> <span slot="title">分享管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="8-1" @click="jumpLink('sharePhotoList')">分享图片</el-menu-item>
                            <el-menu-item index="8-2" @click="jumpLink('shareTitleSet')">分享标题设置</el-menu-item> 
                        </el-menu-item-group>
                    </el-submenu> 
                    <!--<el-menu-item index="5">
                        <i class="iconfont icon-shouye"></i>
                        <span slot="title">举报</span>
                    </el-menu-item>-->
                    <!--<el-submenu index="1" >
                        <template slot="title"> <i class="iconfont icon-shouye"></i> <span slot="title">设置</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="jumpLink('adminList')">管理员账号</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu> -->
                </el-menu>

        </div>

            <div class="content-main" >
                <router-view/>
            </div>
        </div>

    </div>
</template>
<script>
import * as api from './../../api/api'
export default {
    name: 'mixBase',
    data () {
        return {
            isCollapse:false,
            showMenuList:{},
            adminName:sessionStorage.getItem('username'),

        }
    },
    created() {
        this.showMenuList=JSON.parse(sessionStorage.getItem('limit'));
    },
    methods: {
        handleOpen(key, keyPath) {
        console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        //跳转classlist
        jumpLink(val){
            this.$router.push({name:val})
        },
        jumpLogin(val){
            sessionStorage.setItem("username",'')
            sessionStorage.setItem("u_id",'')
            this.$router.push({name:val})
        }
    }
}
</script>
<style scoped lang="scss">
.mixBase{
    width:100%;
    height:100%;
    overflow:auto;
    padding-top:50px;
    box-sizing:border-box;
    .mixBase-content{
        width:100%;
        height:100%;
        padding:0 0 0 200px;
        transition: padding .5s;
        -moz-transition: padding .5s;  /* Firefox 4 */
        -webkit-transition: padding .5s;  /* Safari 和 Chrome */
        -o-transition: padding .5s;  /* Opera */
        box-sizing:border-box;
    }
    .content-active{
        padding:0 0 0 65px;
        transition: padding .5s;
        -moz-transition: padding .5s;  /* Firefox 4 */
        -webkit-transition: padding .5s;  /* Safari 和 Chrome */
        -o-transition: padding .5s;  /* Opera */
    }
    .header{
        height:50px;
        width:100%;
        position:fixed;
        top:0;
        background:#fff;
        color:#333;
        div{
            display:inline-block;
        }
        .logo-icon{
            height:50px;
            width: 200px;
            line-height:50px;
            box-sizing:border-box;
            background-color: #fff;
            font-size:28px;
            padding-left:10px;
            img{
                height:100%;
                vertical-align: middle;
            }
        }
        .adimi-name{
            line-height:50px;
            font-size:20px;
            padding-left:20px;
        }
    }
    .tabs{
        padding-left: 2%;
    }
    .el-tabs__item{
        font-size: 20px;
    }
    .float-right{
        width: 5%;
        height: 40%;
    }
    .el-dropdown-link {
        line-height:50px;
        cursor: pointer;
        color: black;
    }
    .el-dropdown{
        padding-top: 8%;
    }
    .el-icon-arrow-down{
        font-size: 30px;
    }
    .setIcon{
        font-size:30px;
    }
    .nav-list{
        height:100%;
        overflow:auto;
        position: fixed;
        left:0;
        z-index: 10;
        background:#fff;
        border-right: solid 1px #E6E6E6;

        .open-nav{
            width:100%;
            box-sizing:border-box;
            padding: 14px 20px;
            cursor: pointer;
            background-color: #ECFBFF;
            color:#333;
            &:hover{
                background:#ECF5FF;
            }
        }
        .el-menu{
            border-right: solid 1px #fff;
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
        }
        .iconfont{
            font-size:18px;
            font-weight:bold;
            margin-right:10px;
        }
        .nav-menu-open{
            width:200px;
        }
    }
    .nav-list::-webkit-scrollbar{
        width: 2px;
        height: 6px;
        background-color: #F5F5F5;
    }
    .nav-list::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    .nav-list::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }
    .content-main{
        width:100%;
        height:100%;
        overflow: auto;
    }
}

</style>
